<template>
    <el-row class="login-page">
        <el-col :span="7"></el-col>
        <el-col :span="10" class="form" style="border: 2px solid gray;">
            <el-form ref="form" size="large">
                <el-form-item>
                    <h1>用户信息</h1>
                </el-form-item>
                <el-form-item label="用户名">
                    <el-input :prefix-icon="User" v-model="userSignUpInput.username" placeholder="请输入用户名"
                        :disabled="isFormDisabled"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input :prefix-icon="Lock" type="password" v-model="userSignUpInput.userpassword"
                        placeholder="请输入密码" :disabled="isFormDisabled"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-select v-model="userSignUpInput.sex" placeholder="请选择你的性别" :disabled="isFormDisabled">
                        <el-option label="男" value="男" />
                        <el-option label="女" value="女" />
                    </el-select>
                </el-form-item>
                <el-form-item label="出生日期">
                    <el-col :span="11">
                        <el-date-picker v-model="userSignUpInput.birthday" type="date" placeholder="Pick a date"
                            style="width: 100%" :disabled="isFormDisabled"></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="职业">
                    <el-input v-model="userSignUpInput.work" :disabled="isFormDisabled"></el-input>
                </el-form-item>
                <el-form-item label="个人介绍">
                    <el-input v-model="userSignUpInput.intro" type="textarea" :disabled="isFormDisabled"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="userSignUpInput.phone" :disabled="isFormDisabled"></el-input>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="7"></el-col>
    </el-row>
</template>

<style lang="scss" scoped>
/* 样式 */
.login-page {
    height: 100vh;
    background-color: #fff;

    // .bg {
    //     background: url('@/assets/logo2.png') no-repeat 60% center / 240px auto,
    //         url('@/assets/login_bg.jpg') no-repeat center / cover;
    //     border-radius: 0 20px 20px 0;
    // }

    .form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        user-select: none;


        .title {
            margin: 0 auto;
        }

        .button {
            width: 100%;
        }

        .flex {
            width: 100%;
            display: flex;
            justify-content: space-between;
        }
    }
}
</style>
<script>
export default {
    props: {
        userAccount: String,
    },
    data() {
        return {
            isFormDisabled: true,
            userSignUpInput: {
                username: 'error', // 使用 props 中的 userAccount 初始化 username
                userpassword: "123",
                sex: '男',
                birthday: '2004-04-29',
                work: '123',
                intro: '123',
                phone: '123',
            },
            Alert: "",
            fit: 'contain',
        }
    },
    mounted() {
        this.$axios.post('/index.php/User/getAllUserInfor', { 'username': this.userAccount })
            .then(response => {
                // 处理成功的响应
                if (response.data.status) {
                    console.log(response.data.data);
                }
                this.userSignUpInput = response.data.data;
                this.userSignUpInput.phone = response.data.data.id;
                // this.handleLogin(response.data.status); // 根据需要进行进一步处理
            })
            .catch(error => {
                // 处理错误
                console.error('There was an error!', error);
                this.Alert = 'Error: ' + error.message;
            });
    },
    methods: {
        userSignup() {

        }
    }
}

</script>
<style scoped>
.bg {
  background-color: #f0f0f0; /* 设置背景颜色 */
  height: 100vh; /* 高度占满整个视口 */
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.image-container {
  position: relative; /* 设置相对定位 */
}

.centered-image {
  pointer-events: none; /* 禁止鼠标事件 */
}
</style>